<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('添加数据源')"/>
    <style>
        .layui-table-box, .layui-table-body, .layui-table-cell {
            overflow: visible !important;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-brief" lay-filter="edit-filter">
            <ul class="layui-tab-title">
                <li class="layui-this">属性设置</li>
                <li>表单配置</li>
                <li>列表配置</li>
                <li>查询配置</li>
                <li>生成信息</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table id="prop-table" lay-filter="prop-table"></table>
                    <div class="layui-input-block">
                        <button class="pear-btn pear-btn-md pear-btn-radius pear-btn-primary " lay-submit
                                lay-filter="table_update">修改
                        </button>
                    </div>
                </div>
                <div class="layui-tab-item ">
                    <table id="form-table" lay-filter="form-table"></table>
                    <div class="layui-input-block">
                        <button class="pear-btn pear-btn-md pear-btn-radius pear-btn-primary " lay-submit
                                lay-filter="table_update">修改
                        </button>
                    </div>
                </div>
                <div class="layui-tab-item ">
                    <table id="column-table" lay-filter="column-table"></table>
                    <div class="layui-input-block">
                        <button class="pear-btn pear-btn-md pear-btn-radius pear-btn-primary " lay-submit
                                lay-filter="table_update">修改
                        </button>
                    </div>
                </div>
                <div class="layui-tab-item ">
                    <table id="query-table" lay-filter="query-table"></table>
                    <div class="layui-input-block">
                        <button class="pear-btn pear-btn-md pear-btn-radius pear-btn-primary " lay-submit
                                lay-filter="table_update">修改
                        </button>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <form class="layui-form layui-row layui-col-space16" action="" onsubmit="return false">
                                <input name="id" type="hidden" th:value="${table.id}"/>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">表名称</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="tableName" required lay-verify="required" lay-affix="clear"
                                                   th:value="${table.tableName}"
                                                   placeholder="请输入表名称" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">实体名称</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="className" required lay-verify="required" lay-affix="clear"
                                                   th:value="${table.className}"
                                                   placeholder="请输入实体类名称" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">基础包名</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="packageName" required lay-verify="required"
                                                   lay-affix="clear"
                                                   th:value="${table.packageName}"
                                                   placeholder="请输入包名" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">模 块 名</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="moduleName" required lay-verify="required"
                                                   lay-affix="clear"
                                                   th:value="${table.moduleName}"
                                                   placeholder="请输入模块名" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">表 描 述</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="tableComment" lay-affix="clear" placeholder="表描述"
                                                   th:value="${table.tableComment}"
                                                   autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">作 者</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="author" th:value="${table.author}"
                                                   lay-affix="clear" placeholder="作者名" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">邮 箱</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="email" th:value="${table.email}"
                                                   lay-affix="clear" placeholder="请输入作者邮箱" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">生成方式</label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="type" value="zip" lay-filter="radio-filter"
                                                   title="zip压缩包" checked>
                                            <input type="radio" name="type" value="path" lay-filter="radio-filter"
                                                   title="自定义路径">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md12 layui-hide" id="path">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">自定义路径</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="backendPath" th:value="${table.backendPath}"
                                                   lay-affix="clear" placeholder="请输入路径" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item btns">
                                    <div class="layui-input-block">
                                        <button class="pear-btn pear-btn-md pear-btn-radius pear-btn-primary " lay-submit
                                                lay-filter="table_update">修改
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<script type="text/javascript" th:inline="javascript">
    let MODULE_PATH = "/table/" + [[${table.id}]];
    let TABLE_PATH = "/table/";
    layui.use(['table', 'form', 'http', 'element', 'common'], function () {
        let table = layui.table;
        const util = layui.util;
        const form = layui.form;
        const common = layui.common;
        const http = layui.http;
        const element = layui.element;

        let cols0 = [
            [
                {
                    type: 'numbers',
                    title: '#',
                },
                {
                    title: '字段名',
                    field: 'fieldName',
                    align: 'center'
                },
                {
                    title: '主键',
                    field: 'primaryPk',
                    align: 'center',
                    width: 70,
                    templet: function (d) {
                        if (d.primaryPk) {
                            return `<span class="tag-item layui-btn-sm" >是</span>`
                        }
                        return `<span class="tag-item tag-item-danger  layui-btn-sm">否</span>`
                    }
                },
                {
                    title: '字段类型',
                    field: 'fieldType',
                    align: 'center'
                },
                {
                    title: '说明 <i class="pear-icon pear-icon-edit" title="该字段开启了编辑功能"></i>',
                    field: 'fieldComment',
                    align: 'left',
                    edit: 'textarea'
                },
                {
                    title: '属性名<i class="pear-icon pear-icon-edit" title="该字段开启了编辑功能"></i>',
                    field: 'attrName',
                    align: 'left',
                    edit: 'text'
                },
                {
                    title: '属性类型',
                    field: 'attrType',
                    align: 'center',
                    templet: function (d) {
                        let type = d.attrType
                        console.log(type)
                        return `
                                 <select lay-filter="attrTypeChange" id="${d.id}">
                                      <option id="0" value="" >请选择</option>
                                      <option  value="Integer" ${type === 'Integer' ? 'selected' : ''}>Integer</option>
                                      <option  value="Float" ${type === 'Float' ? 'selected' : ''}>Float</option>
                                      <option  value="Long" ${type === 'Long' ? 'selected' : ''}>Long</option>
                                      <option  value="String" ${type === 'String' ? 'selected' : ''}>String</option>
                                      <option  value="Boolean" ${type === 'Boolean' ? 'selected' : ''}>Boolean</option>
                                      <option  value="Double" ${type === 'Double' ? 'selected' : ''}>Double</option>
                                      <option  value="Date" ${type === 'Date' ? 'selected' : ''}>Date</option>
                                      <option  value="BigDecimal" ${type === 'BigDecimal' ? 'selected' : ''}>BigDecimal</option>
                                      <option  value="Object" ${type === 'Object' ? 'selected' : ''}>Object</option>
                                </select>
                        `
                    }
                },
                {
                    title: '<i class="pear-icon pear-icon-edit" title="该字段开启了编辑功能"></i>自动填充',
                    field: 'autoFill',
                    align: 'center',
                    edit: 'text'
                }
            ]]
        let cols1 = [
            [{
                type: 'numbers',
                title: '#',
            },
                {
                    title: '属性名',
                    field: 'fieldName',
                    align: 'center'
                },
                {
                    title: '说明',
                    field: 'fieldComment',
                    align: 'center'
                },
                {
                    title: '表单显示',
                    field: 'formItem',
                    align: 'center',
                    templet: function (d) {
                        if (d.formItem) {
                            return `<input type="checkbox" name="formItem" checked>`
                        }
                        return `<input type="checkbox" name="formItem">`
                    }
                },
                {
                    title: '表单必填',
                    field: 'formRequired',
                    align: 'center',
                    templet: function (d) {
                        if (d.formRequired) {
                            return `<input type="checkbox" name="formRequired" checked>`
                        }
                        return `<input type="checkbox" name="formRequired">`
                    }
                },
                {
                    title: '<i class="pear-icon pear-icon-edit" title="该字段开启了编辑功能"></i>表单校验',
                    field: 'formValidator',
                    align: 'center',
                    edit: 'text'
                },
                {
                    title: '表单类型',
                    field: 'formType',
                    align: 'center'
                },
                {
                    title: '<i class="pear-icon pear-icon-edit" title="该字段开启了编辑功能"></i>表单字典类型',
                    field: 'formDict',
                    align: 'center',
                    edit: 'text'
                }
            ]
        ]
        let cols2 = [
            [{
                type: 'numbers',
                title: '#',
            },
                {
                    title: '属性名',
                    field: 'fieldName',
                    align: 'center'
                },
                {
                    title: '说明',
                    field: 'fieldComment',
                    align: 'center'
                },
                {
                    title: '列表显示',
                    field: 'gridItem',
                    align: 'center',
                    templet: function (d) {
                        if (d.gridItem) {
                            return `<input type="checkbox" name="gridItem" checked>`
                        }
                        return `<input type="checkbox" name="gridItem">`
                    }
                },
                {
                    title: '列表排序',
                    field: 'gridSort',
                    align: 'center',
                    templet: function (d) {
                        if (d.gridSort) {
                            return `<input type="checkbox" name="gridSort" checked>`
                        }
                        return `<input type="checkbox" name="gridSort">`
                    }
                }
            ]
        ]
        let cols3 = [
            [{
                type: 'numbers',
                title: '#',
            },
                {
                    title: '属性名',
                    field: 'fieldName',
                    align: 'center'
                },
                {
                    title: '说明',
                    field: 'fieldComment',
                    align: 'center'
                },
                {
                    title: '查询显示',
                    field: 'queryItem',
                    align: 'center',
                    templet: function (d) {
                        if (d.queryItem) {
                            return `<input type="checkbox" name="queryItem" checked>`
                        }
                        return `<input type="checkbox" name="queryItem">`
                    }
                },
                {
                    title: '查询方式',
                    field: 'queryType',
                    align: 'center',
                    width: 170,
                    templet: function (d) {
                        return `
                          <select>
                              <option value="">请选择查询方式</option>
                              <option value="1">=</option>
                              <option value="AAA">!=</option>
                              <option value="BBB">></option>
                              <option value="CCC">>=</option>
                              <option value="CCC"><</option>
                              <option value="CCC"><=</option>
                              <option value="CCC">like</option>
                              <option value="CCC">right like</option>
                              <option value="CCC">left like</option>
                           </select>
                        `
                    }
                },
                {
                    title: '查询表单类型',
                    field: 'queryFormType',
                    align: 'center'
                }
            ]
        ]

        http.get("/mapping/list", {}).then(res => {
            let data = []
            for (let i = 0; i < res.data.length; i++) {
                data.push({title: res.data[i], id: i})
            }
            console.log(data)

        })

        let propData = []
        http.get(MODULE_PATH, {}).then(res => {
            propData = res.data
            window.reloadTable('prop-table', cols0)
        })
        // 切换tab
        element.on('tab(edit-filter)', function (data) {
            let index = data.index
            switch (index) {
                case 0:
                    window.reloadTable('prop-table', cols0)
                    break
                case 1:
                    window.reloadTable('form-table', cols1)
                    break
                case 2:
                    window.reloadTable('column-table', cols2)
                    break
                case 3:
                    window.reloadTable('query-table', cols3)
                    break
            }
        })

        /**
         * 重新渲染表格
         * @param elem
         * @param clos
         */
        window.reloadTable = function (elem, clos) {
            console.log(propData.fieldList, "渲染")
            table.render({
                elem: '#' + elem,
                id: elem,
                cols: clos,
                data: propData.fieldList,
                skin: 'line',
                text: {none: '暂无信息'}
            });
        }

        form.on('radio(radio-filter)', function (data) {
            console.log(data)
            let _path = $("#path")
            if (data.value === 'path') {
                _path.removeClass("layui-hide").addClass("layui-show")
            } else {
                _path.removeClass("layui-show").addClass("layui-hide")
            }
        })

        form.on('select(attrTypeChange)', function (data) {
            let ele = data.elem
            let attrType = data.value; // 获得被选中的值
            let id = Number($(ele).attr("id"))
            common.setArrObjItem(propData.fieldList, 'id', id, 'attrType', attrType)
            console.log(propData.fieldList)
        })

        form.on('submit(table_update)', function (data) {
            http.request({
                url: TABLE_PATH + "update",
                contentType: http.contentType.json,
                data: data.field,
                method: "put"
            }).then(res => {
                layer.msg(res.message, {icon: 1, time: 1000}, function () {
                });
            }).catch(e => {
                console.log(e)
            })
            return false;
        });

        util.on({
            typeClick: function (e) {
                console.log(e)
            }
        })
    });
</script>
</body>
</html>